<template>
  <div>
    <a-form :label-col="{ span: 8 }" :model="codeFormData.info" :rules="rules" @finish="next">
      <TopTool>
        <template #left>
          <div class="system__icon" @click="goGenHome">
            <HomeOutlined />
          </div>
        </template>
        <template #right>
          <a-button htmlType="submit" type="primary"><RightOutlined /></a-button>
        </template>
      </TopTool>

      <a-card :bordered="false" :body-style="{ padding: '12px' }">
        <div class="p-12">
          <h3>基础信息设置</h3>
          <div class="system__subtitle mt-12">这里的配置不会影响生成的代码的业务逻辑</div>
        </div>
        <a-divider />
        <a-row v-for="(item, key) in formItems" :key="key">
          <a-col :span="12">
            <a-form-item
              :help="item.desc"
              :label="item.label"
              :name="item.name"
              :required="item.require"
            >
              <a-input
                v-model:value="(codeFormData.info as any)[item.name]"
                :placeholder="`请输入${item.label}`"
                :maxLength="140"
                allow-clear
                :disabled="item.disabled"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12"></a-col>
        </a-row>
        <!-- 提交 -->
        <a-row>
          <a-col :span="9" :offset="3">
            <div class="text-right"></div>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import type { Rule } from 'ant-design-vue/es/form/interface';
import { GenStepEnum, nextStep } from '../data/config';
import { goGenHome } from '../data/curd';
import { codeFormData } from '../data/data';
import TopTool from './components/TopTool.vue';

const formItems = [
  {
    label: '表的名称',
    desc: `数据库中表的名字`,
    name: 'tableName',
    maxLength: 16,
    disabled: true,
    require: true,
  },
  {
    label: '作者名称',
    desc: `标注是谁创建/更新的`,
    name: 'functionAuthor',
    maxLength: 16,
    require: true,
  },
  {
    label: '描述信息',
    desc: `用于标识该表的作用,不会对数据库产生影响`,
    name: 'tableComment',
    maxLength: 50,
    require: true,
  },
  {
    label: '表的备注',
    desc: '如有特殊备注,在这里填写',
    name: 'remark',
    maxLength: 140,
    require: false,
  },
];
const rules: Record<string, Rule[]> = {
  tableName: [
    {
      required: true,
    },
  ],
  functionAuthor: [
    {
      required: true,
    },
  ],
};

const next = () => {
  nextStep(GenStepEnum.FIELD);
};
</script>

<style lang="scss" scoped>
:deep(.ant-card) {
  box-shadow: none;
}
</style>
